<!-- * @Author: your name
 * @Date: 2021-09-13 11:16:50
 * @LastEditTime: 2021-09-13 14:18:18
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \briup\6-jQuery\day02\xxtx\index.html -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行学天下-首页</title>
    <script src="../../js/jquery.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body,
        .main {
            width: 100%;
            height: 100%;
        }
        /* 顶部的样式 */
        
        .top {
            width: 100%;
            background-color: gold;
            color: white;
            font-size: 30px;
            height: 70px;
            line-height: 70px;
            box-sizing: border-box;
        }
        
        .user {
            float: right;
        }
        /* 菜单栏的样式 */
        
        .bottom {
            width: 100%;
            height: calc(100% - 70px);
        }
        
        .bottom-left {
            width: 170px;
            height: 100%;
            background-color: darkgoldenrod;
            float: left;
        }
        
        .bottom-left li {
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: darkgoldenrod;
            color: ghostwhite;
            border-bottom: 1px solid #eee;
            font-size: 18px;
            cursor: pointer;
        }
        
        .bottom-left li:hover {
            background-color: goldenrod;
        }
        
        .bottom-right {
            height: 100%;
            width: calc(100% - 170px);
            float: left;
            background-color: burlywood;
        }
        
        .content {
            width: 98%;
            height: 98%;
            background-color: #fff;
            margin-left: 1%;
            margin-top: 1%;
            border-radius: 5px;
            padding: 1%;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="top">
            <span>行学天下后台管理系统</span>
            <div class="user">
                欢迎,
            </div>
        </div>
        <div class="bottom">
            <div class="bottom-left">
                <ul>
                    <li>用户管理</li>
                    <li>栏目管理</li>
                    <li>项目管理</li>
                </ul>
            </div>
            <div class="bottom-right">
                <div class="content"></div>
            </div>
        </div>
    </div>
</body>
<script>
    //页面加载完成后，模拟点击菜单栏第一项
    //trigger()指触发被选元素指定触发类型
    $(function() {
            $(".bottom-left li:first").trigger("click");
        })
        //.bottom-left ul 事件代理，把事件绑定到当前元素的父元素上，也就是ul上面
    $(".bottom-left ul").on({
            click: function() {
                //this指代li
                console.log($(this));
                if ($(this).text() == "用户管理") {
                    $(".content").load("./user.html")
                } else if ($(this).text() == "栏目管理") {
                    $(".content").load("./column.html")
                } else if ($(this).text() == "项目管理") {
                    $(".content").load("./project.html")
                }
            }
        }, "li")
        //获取用户信息
    var token = sessionStorage.getItem("token");
    $.ajax({

        url: "http://39.103.202.53:8888/user/info?token=" + token,
        contentType: "application/json",
        headers: {
            "Authorization": token
        },
        success: function(res) {
            console.log(res);
            $(".user").append(res.data.username);
        }
    })
</script>

</html>